<template>
  <div class="function">
    <!-- 导航栏 -->
    <div class="title">
      <div class="name">{{username}}</div>
      <div class="record" @click="toggle_record_pop"><i class="icon-chengjijilu iconfont"> 成绩记录</i></div>
      <div class="unit">{{unit}}</div>
      <div class="logo" @click="exit_login">
        <!-- <img src="@/assets/logo.jpg">   -->
         <span><i class="icon-tuichudenglu iconfont"> 退出登录</i></span>
      </div>
    </div>
    <!-- 中间主体区域 -->
    <div class="content">
      <div class="To_train" @click="ToTrain">
        <div class="To_img">
          <img src="@/assets/train.jpg" alt="">
        </div>
        <div class="To_text">训练</div>
      </div>
      <div class="To_examine" @click="ToExamine">
        <div class="To_img">
          <img src="@/assets/examine.jpg" alt="">
        </div>
        <div class="To_text">考核</div>
      </div>
    </div>


<!--    成绩记录窗口-->
    <div class="record_pop" v-if="record_status">
      <div class="record_pop_title">
        <div></div>
        <div>成绩表</div>
        <div class="record_pop_exit">
          <i class="icon-tuichu iconfont" @click="record_pop_exit"></i>
        </div>
      </div>
      <div class="record_pop_content">
        <div class="record_pop_content_self">
          <div class="record_pop_content_self_title">
            <div class="record_pop_content_self_grade record_pop_content_self_title_content">序号</div>
            <div class="record_pop_content_self_name record_pop_content_self_title_content">姓名</div>
            <div class="record_pop_content_self_date record_pop_content_self_title_content">时间</div>
            <div class="record_pop_content_self_grade record_pop_content_self_title_content">试题数(/正确数)</div>
            <div class="record_pop_content_self_grade record_pop_content_self_title_content">成绩</div>
          </div>
          <div class="record_pop_content_self_content">
            <div class="record_pop_content_self_content_table">
              <div class="record_pop_content_self_content_table_tr" v-for="(item,index) in self_pagination_list" :key="index">
                <div class="record_pop_content_self_content_table_tr_td">{{index+1+self_page_num}}</div>
                <div class="record_pop_content_self_content_table_tr_td">{{item.user_name}}</div>
                <div class="record_pop_content_self_content_table_tr_td">{{item.exam_date}}</div>
                <div class="record_pop_content_self_content_table_tr_td">{{item.question_count}}/{{ item.examine_true_num }}</div>
                <div class="record_pop_content_self_content_table_tr_td">{{item.user_grade}}</div>
              </div>
            </div>
          </div>
          <div class="record_pop_content_self_pagination">
              <div class="record_pop_content_self_pagination_content">
                    <div class="block element_pagination_content">
                      <el-pagination
                        @current-change="HandleSelfUserRecordsData"
                        :page-size="record_page_num"
                        layout="total, prev, pager, next"
                        :total="record_self_nums">
                      </el-pagination>
                    </div>
              </div>
          </div>
        </div>
      </div>
      <div class="record_pop_others"  id="popup">
        <div class="record_pop_others_a">
          <div></div>
          <div class="record_pop_others_title" id="record_pop_others_title"></div>
          <div>
            <span  @click="togglePopup"  id="toggleButton">查看部门成绩</span>
          </div>
        </div>
        <div class="record_pop_others_content">
          <div class="record_pop_others_content_table">
            <div class="record_pop_others_content_table_title">
              <div>序号</div>
              <div>姓名</div>
              <div>时间</div>
              <div>试题数(/正确数)</div>
              <div>成绩</div>
            </div>
            <div class="record_pop_others_content_table_content">
              <div class="record_pop_others_content_table_content_tr" v-for="(item,index) in others_pagination_list" :key="index">
                <div>{{index+1+others_page_num}}</div>
                <div>{{item.user_name}}</div>
                <div>{{item.exam_date}}</div>
                <div>{{item.question_count}}/{{ item.examine_true_num }}</div>
                <div>{{item.user_grade}}</div>
              </div>
            </div>
          </div>
          <div class="record_pop_others_content_pagination">
            <div class="record_pop_others_content_pagination_content">
              <div class="block element_pagination_content">
                      <el-pagination
                        @current-change="HandleOthersUserRecordsData"
                        :page-size="record_page_num"
                        layout="total, prev, pager, next"
                        :total="record_others_nums">
                      </el-pagination>
              </div>
            </div>
          </div>
          <div class="overall_grade">
            <span @click="toggle_overall_grade_page_Popright" id="open_overall_grade_page">查看考核记录</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人做题量统计 -->
    <div class="overall_grade_page" id="overall_grade_page">
      <div class="overall_grade_page_title">
        <div></div>
        <div>综合统计</div>
        <div>
          <!-- <i class="icon-tuichu iconfont" @click="overall_grade_page_exit"></i> -->
          <i class="icon-zuobianlansuohui iconfont" @click="toggle_overall_grade_page_Popleft"></i>
        </div>
      </div>
      <div class="overall_grade_page_content">
        <div class="overall_grade_page_content_function">
          <div class="overall_grade_page_content_function_tip">当前人员</div>
          <div class="overall_grade_page_content_function_content">
            <div 
                class="overall_grade_page_content_function_content_div item-box" 
                v-for="(item,index) in tag_list" :key="index"
                :style="{'--bg-color': `hsl(${index * 60}, 70%, 80%)`}"
                >
              <div id="tag_user_name"  class="overall_grade_page_content_function_content_div_text">{{item.user_name}}</div>
              <div class="overall_grade_page_content_function_content_div_button">
                <i @click="remove_tag_add_sys_list(item)" class="icon-chacha iconfont"></i>
              </div>
            </div>
            <div @click="open_add_tag_page" class="overall_grade_page_content_function_content_lastdiv overall_grade_page_content_function_content_div"></div>
          </div>
        </div>
        <div class="overall_grade_page_content_table">
          <div class="overall_grade_page_content_table_content">
            <div class="overall_grade_page_content_table_content_title">
              <div>序号</div>
              <div>姓名</div>
              <div>账号</div>
              <div>今日内考核题量（/正确量）</div>
              <div>本周内考核题量（/正确量）</div>
              <div>本月内考核题量（/正确量）</div>
              <div>考核总题量（/总正确量）</div>
              <div>综合评价</div>
            </div>
            <div class="overall_grade_page_content_table_content_list">
              <div class="overall_grade_page_content_table_content_list_tr" v-for="(item,index) in tag_list" :key="index">
                <div>{{ index+1 }}</div>
                <div>{{ item.user_name }}</div>
                <div>{{ item.user_account }}</div>
                <div>{{ item.Today_question_count }}/{{ item.Today_examine_true_num }}</div>
                <div>{{ item.week_question_count }}/{{ item.week_examine_true_num }}</div>
                <div>{{ item.month_question_count }}/{{ item.month_examine_true_num }}</div>
                <div>{{ item.total_question_count }}/{{ item.total_examine_true_num }}</div>
                <div>--</div>
              </div>
            </div>
          </div>
        </div>
        <div class="overall_grade_page_content_bottom">
          <div class="overall_grade_page_content_bottom_text">
            注：考核题量根据用户进入考核模式进行做题计数，训练模式暂不支持计入题量，中途退出未完成完整一次考核的根据所做题量计入。
          </div>
        </div>
      </div>



      <!-- add_tag -->
      <div class="overall_grade_page_add_tag" v-if="add_tag_pop">
        <div class="overall_grade_page_add_tag_title">
          <div></div>
          <div>此系统当前用户</div>
          <div>
            <i @click="open_add_tag_page"  class="icon-chacha iconfont"></i>
          </div>
        </div>
        <div class="overall_grade_page_add_tag_content">
          <div @click="remove_sys_add_tag(item)" 
              id="system_user_name" 
              class="overall_grade_page_add_tag_content_div" 
              v-for="(item,index) in sys_list" :key="index">
            {{ item.user_name }}
          </div>
        </div>
      </div>
    </div>

    <!-- 网站页脚 -->
    <div class="Footer">
      <Footer_Component/>
    </div>

  </div>
</template>

<script>
import examine_scores from '@/assets/api/examine_scores'
import users from '@/assets/api/users'
import Footer_Component from '@/components/Footer_Component.vue'

export default{
  name:'FunctionPage',
  components: {
    Footer_Component,
  },
  data(){
    return{
      unit:'曲靖市消防救援支队指挥中心行政区划训练平台',
      record_status:false,  //成绩记录窗口

      record_page_num:17, //每页显示的数据条数
      record_others_data:[],//部门总数据--原始
      record_others_list:[],//部门总数据--处理后
      record_others_nums:0, //部门总数据条数
      record_self_data:[],//当前帐号总数据--原始
      record_self_list:[],//当前帐号总数据--处理后
      record_self_nums:0, //当前帐号总数据条数
      self_pagination_list:[],  //当前账号数据显示在分页器当前页的数据
      others_pagination_list:[],  //部门总数据显示在分页器当前页的数据
      self_page_num : 0,   //当前页数----序号用
      others_page_num : 0,  //当前页数----序号用

      overall_grade_page_status:true,   //综合统计窗口显示

      tag_list:[],   //显示在综合统计上面的标签列表--默认显示的用户
      sys_list:[],   //----全部的系统用户（除去默认显示的用户）
      add_tag_pop:false,  //添加用户标签窗口

      overall_user_list:[],  //全部的系统用户
    }
  },
  computed:{
    // userData: this.$store.state.response
    username(){
      // return this.$store.state.response.Name
      let data =  JSON.parse(localStorage.getItem('familiar_with_qujingmap_userinfo'))
      // console.log('用户数据：',data.Name)
      return data.user_name
    },
    user_account(){
      // return this.$store.state.response.Name
      let data =  JSON.parse(localStorage.getItem('familiar_with_qujingmap_userinfo'))
      // console.log('用户数据：',data.Name)
      return data.user_account
    },
    // userid(){
    //   return this.$store.state.response
    // }
  },
  created(){
    //加载后端成绩数据
    this.load_all_examine_scores_data()

    //加载用户信息---用于综合统计
    this.load_users()

    //加载用户成绩数据---本地
    // this.loadUserRecordsData()
  },
  mounted(){
    
  },
  methods:{
    
    //成绩表定位变化
    toggle_overall_grade_page_Popright() {
        let popup = document.getElementById("overall_grade_page");
        popup.classList.remove("overall_grade_page_left"); // 先移除左侧样式
        popup.classList.toggle("overall_grade_page_right");
    },
    toggle_overall_grade_page_Popleft() {
        let popup = document.getElementById("overall_grade_page")
        popup.classList.remove("overall_grade_page_right"); // 先移除右侧样式
        popup.classList.toggle("overall_grade_page_left");
    },
    //删除标签页中用户并添加至界面
    remove_tag_add_sys_list(item){
      //从标签页中删除用户
      this.tag_list = this.tag_list.filter(user => user.user_account !== item.user_account);
      //添加进页面
      this.sys_list.push(item)
    },

    //删除界面中用户并添加至标签页
    remove_sys_add_tag(item){
      //从系统页中删除用户
      this.sys_list = this.sys_list.filter(user => user.user_account !== item.user_account);
      //添加进标签页
      this.tag_list.push(item)
    },


    //打开标签页
    open_add_tag_page(){
      this.add_tag_pop = !this.add_tag_pop
    },
    //综合统计面退出
    overall_grade_page_exit(){
      this.overall_grade_page_status = false
      this.add_tag_pop = false
    },
    //打开综合统计
    open_overall_grade_page(){
      this.overall_grade_page_status = true
    },






    //获取用户信息
    async load_users(){
      let account = this.user_account
      // let currentTime = this.getFormattedDateTime();  //现在时间
      // let start_date = currentTime
      // let end_date = currentTime
      users.get_all_users_viewsores_request(account).then((data) => {
            // 确保 data 是数组格式
            if (Array.isArray(data[0])) {
              // 如果是数组，直接使用
              this.overall_user_list = data[0].slice().reverse();
            } else if (typeof data[0] === 'object' ) {
              // 如果是对象，包装成数组
              this.overall_user_list = [data[0]].slice().reverse();
            } else {
              // 其他情况（如、undefined、原始值），设置为空数组
              this.overall_user_list = [];
              console.warn('获取到的用户数据为空:', data);
            }
            // console.log("获取到的用户数据:", this.overall_user_list)
            let show_user = ['陈涛','李靖','唐碧婵','李东骏','李明韦']
            /*
                tag_list -----默认显示的用户
                sys_list -----全部用户（除去默认显示的用户）
            */
            for (let i = 0; i < this.overall_user_list.length; i++) {
              const user = this.overall_user_list[i];
              const userName = user.user_name;
              
              if (show_user.includes(userName)) {
                  // 如果用户名在show_user中，添加到tag_list
                  this.tag_list.push(user);
              } else {
                  // 否则添加到add_tag_pop
                  this.sys_list.push(user);
              }
            }
            // console.log('系统用户：',this.sys_list)
        }).catch((error) => {
        console.error("获取用户数据失败:", error);
      });
    
    }, 






    //仅加载后端成绩数据
    async load_all_examine_scores_data(){
      //从后端加载成绩信息
      examine_scores.get_examine_all_scores_request().then((data) => {
        // 确保 data 是数组格式
        if (Array.isArray(data)) {
          // 如果是数组，直接使用
          this.record_others_data = data.slice().reverse();
        } else if (typeof data === 'object' ) {
          // 如果是对象，包装成数组
          this.record_others_data = [data].slice().reverse();
        } else {
          // 其他情况（如、undefined、原始值），设置为空数组
          this.record_others_data = [];
          console.warn('Expected an object or array, but got:', data);
        }
        // console.log('最终数据格式:', this.record_self_data);
        // this.record_others_data = data
        // console.log("获取到的数据-全部:", this.record_others_data);
        this.record_others_nums = this.record_others_data.length
      }).catch((error) => {
        console.error("获取数据失败:", error);
      });
      // console.log("获取到的数据-quanbu:", this.record_others_data);
      
      
      let account = this.user_account
      examine_scores.get_examine_person_scores_request(account).then((data) => {
        // 确保 data 是数组格式
        if (Array.isArray(data)) {
          // 如果是数组，直接使用
          this.record_self_data = data.slice().reverse();
        } else if (typeof data === 'object' ) {
          // 如果是对象，包装成数组
          this.record_self_data = [data].slice().reverse();
        } else {
          // 其他情况（如、undefined、原始值），设置为空数组
          this.record_self_data = [];
          console.warn('Expected an object or array, but got:', data);
        }
        // console.log('最终数据格式:', this.record_self_data);
        // this.record_self_data = data
        // console.log("获取到的数据:", this.record_self_data);
        this.record_self_nums = this.record_self_data.length
      }).catch((error) => {
        console.error("获取数据失败:", error);
      });
      // console.log("获取到的数据:", this.record_self_data);
      // this.HandleUserRecordsData(this.record_self_data,this.record_others_data,this.record_page_num)
    },

    //获取当前系统时间
    getFormattedDateTime(){
      const d = new Date();
      let now_time =  `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2,'0')}-${d.getDate().toString().padStart(2,'0')} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}:${d.getSeconds().toString().padStart(2,'0')}`;
      // console.log('时间：',now_time)
      return now_time
    },
    

    //处理数据为分页器的格式
    HandleUserRecordsData(record_self_data,record_others_data,record_page_num){
      // HandleUserRecordsData(record_others_data,record_page_num){
      let self_data = []
      let others_data = []
      for(let i=0;i<record_self_data.length;i += record_page_num){
        let chunk = record_self_data.slice(i,i+record_page_num)
        self_data.push(chunk)
      }
      for(let i=0;i<record_others_data.length;i += record_page_num){
        let chunk = record_others_data.slice(i,i+record_page_num)
        others_data.push(chunk)
      }
      this.record_self_list = self_data
      this.record_others_list = others_data
      // this.record_self_list = others_data
       // console.log('个人--处理后：', this.record_self_list);
       // console.log('部门--处理后：', this.record_others_list);
      this.self_pagination_list = this.record_self_list[0]
      this.others_pagination_list = this.record_others_list[0]
      // this.self_pagination_list = this.record_self_list[0]
    },


    //用户点击分页数字时处理数据至页面
    HandleSelfUserRecordsData(val){
      // console.log('当前页：',val)
      let i = Number(val)-1
      this.self_page_num = i * this.record_page_num  //每页的开头序号
      this.self_pagination_list = this.record_self_list[i]
      // console.log('当前数据：',this.self_pagination_list)
    },

    HandleOthersUserRecordsData(val){
      // console.log('当前页：',val)
      let i = Number(val)-1
      this.others_page_num = i * this.record_page_num  //每页的开头序号
      this.others_pagination_list = this.record_others_list[i]
    },






    //成绩表定位变化
    togglePopup() {
      //展示成绩数据
      // this.show_all_examine_scores_data()
        let popup = document.getElementById("popup");
        let toggleButton = document.getElementById("toggleButton");
        let title = document.getElementById("record_pop_others_title");
        popup.classList.toggle("hidden");
        // 切换按钮文字
        if (popup.classList.contains("hidden")) {
          toggleButton.textContent = "点击关闭";
          title.textContent = '部门成绩'
        } else {
          toggleButton.textContent = "查看部门成绩";
          title.textContent = ''
        }
    },
    record_pop_exit(){
      this.record_status = false
      //当前页归零
      this.self_page_num = 0
      this.others_page_num = 0
      //分页器初始化
      this.self_pagination_list = this.record_self_list[0]
      this.others_pagination_list = this.record_others_list[0]
      
    },
    ToTrain(){
      this.$router.push('/train')
      // setTimeout(this.$router.push('/train'),3000)
    },
    ToExamine(){
      this.$router.push('/examine')
    },
    toggle_record_pop(){
      //展示成绩信息
      this.HandleUserRecordsData(this.record_self_data,this.record_others_data,this.record_page_num)
        if(this.record_status){
          this.record_status = false
          this.toggle_overall_grade_page_Popleft() // 关闭综合统计页面
        }else{
          this.record_status = true
        }
    },


    //exit_login
    exit_login(){
      // 移除特定的用户信息项
      localStorage.removeItem('familiar_with_qujingmap_userinfo');
      this.router_push_login()
    },

    router_push_login() {
      this.$router.push('/login')
    },



  },


}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .function{
    width: 100%;
    height: 100vh;
    background-color: antiquewhite;
    background: url("@/assets/function.png") no-repeat center/cover fixed;     /* 地址 背景不重复 覆盖整个元素 居中 固定背景*/
    overflow: hidden;
  }
  .title{
    width: 100%;
    height: 6vh;
    /* background-color: rgb(23, 24, 46); */
    background-color: rgba(2, 8, 24,0.5);
    box-sizing: border-box;
    box-shadow: 1px 1px 1px 1px #070707;
  }

  .name{
    width: 100px;
    height: 100%;
    /* background-color: cyan; */
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    font-weight: bolder;
    float: left;
    color: white;
    font-size:0.8vw;
    overflow: hidden;
  }
  .record{
    width: 110px;
    height: 50px;
    //background-color: #c1945f;
    //margin-left: 150px;
    text-align: center;
    //text-align: left;
    line-height: 50px;
    color: white;
    float: left;
    /* text-decoration: underline; */
  }
  .record:hover{
    cursor: pointer;
    color: greenyellow;
  }
  .record:active{
    color: red;
    //box-shadow: 2px 2px 2px 2px black;
  }
  .unit{
    width: 700px;
    height: 50px;
    /* background-color: yellow; */
    float: left;
    position: relative;
    left: calc(50% - 565px);
    text-align: center;
    line-height: 50px;
    font-weight: bolder;
    font-size: 30px;
    color: white;
    text-shadow: 5px 5px 4px rgb(146, 143, 143);
  }

  .logo{
    width: 100px;
    height: 100%;
    /* background-color: red;  */
    float: right;
    border-radius: 5px;
    overflow: hidden;
    /*background: url("@/assets/logo.png") no-repeat center/cover fixed;*/
    /*box-shadow: 0 0 4px 4px black;*/
    color:white;
    /* text-align:center; */
    line-height:50px;
  }
  .logo span i{
    font-size: 15px;
  }
  .logo:hover{
    color: #0ae80a;
    cursor: pointer;
  }
  .logo:active{
    color: red;
  }
  .logo img{
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .content{
    width: 50vw;
    height: 35vh;
    /* background-color: #c1945f; */
    position: absolute;
    top: 25vh;
    left: calc(50% - 25vw);
    display: flex;
    justify-content: space-between;
  }
  .content:hover{
    cursor: pointer;
  }
  .To_train{
    width: 40%;
    height: 100%;
    //float: left;
    //background-color: yellow;
    box-shadow: 0px 0px 7px 2px #00ffff;
    border-radius: 10px;
  }
  .To_examine{
    width: 40%;
    height: 100%;
    //background-color: greenyellow;
    //float: right;
    box-shadow: 0px 0px 7px 2px #00ffff;
    border-radius: 10px;
  }
  .To_train:hover,.To_examine:hover{
    box-shadow: 0px 0px 5px 5px #24ea38;
  }
  .To_train:hover .To_text{
    color: greenyellow;
  }
  .To_examine:hover .To_text{
    color: greenyellow;
  }
  .To_img{
    width: 100%;
    height: 100%;
    
    //background-color: red;
  }
  .To_img img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .To_text{
    width: 40%;
    height: 100%;
    //float: left;
    position: absolute;
    top: 0px;
    //background-color: aquamarine;
    font-size: 50px;
    text-align: center;
    line-height:35vh;
    color: white;
  }

  .record_pop{
    width: 60vw;
    height: 70vh;
    position: absolute;
    top: 15vh;
    left: calc(50% - 30vw);
    background-color: white;
    box-shadow: 0 0 10px black;
    overflow: hidden;
  }

  .record_pop_title{
    width: 60vw;
    height: 4vh;
    /*border-bottom: 1px #9c9b9b solid;*/
    background-color: #f5f1f1;
    font-weight: bolder;
  }
  .record_pop_title>div{
    width: 33.3%;
    height: 100%;
    /*background-color: #0ae80a;*/
    float: left;
  }
  .record_pop_title>div:nth-child(2){
    text-align: center;
    line-height: 4vh;
    font-size: 1vw;
    color: #1d1c1c;
  }
  .record_pop_exit{
    box-sizing: border-box;
    padding-right: 1vw;
    /*background-color: yellow;*/
    text-align: right;
    line-height: 4vh;
    font-weight: bolder;
  }
  .record_pop_exit i:hover{
    color: #0ae80a;
  }
  .record_pop_exit i:active{
    color: red;
  }
  .record_pop_content{
    width: 60vw;
    height: 60vh;
    /*background-color: #cecbcb;*/
    overflow: hidden;
  }
  .record_pop_content_self{
    width: 55vw;
    height: 58vh;
    /*background-color: #e0dede;*/
    position: relative;
    top: 1vh;
    left: calc(50% - 27.5vw);
    box-sizing: border-box;
    overflow: hidden;
    /*border: 1px solid black;*/
  }
  .record_pop_content_self_title{
    width: 55vw;
    height: 3vh;
    /*background-color: #a8ecca;*/
    /*border-top: 1px solid black;*/
    border-bottom: 1px solid black;
    /*border-left: 1px solid black;*/
    /*border-right: 1px solid black;*/
    font-weight: bolder;
    /*font-size: 2vw;*/
    color: #494b49;
  }
  .record_pop_content_self_title_content{
    width: 19.8%;
    height: 3vh;
    /*background-color: #13f585;*/
    float: left;
    box-sizing: border-box;
    margin-right: 0.1vw;
    text-align: center;
    line-height: 3vh;
    font-size: 0.7vw;
  }
  .record_pop_content_self_content{
    width: 55vw;
    height: 52vh;
    /*background-color: #1bdc81;*/
    box-sizing: border-box;
  }
  .record_pop_content_self_content_table{
    width: 55vw;
    height: 52vh;
    /*background-color: #daea95;*/
    /*border: 1px solid black;*/
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    line-height: 3vh;
    color: #717271;
  }
  .record_pop_content_self_content_table_tr{
    width: 55vw;
    height: 3vh;
    /*background-color: #c7f112;*/
    box-sizing: border-box;
    /*border-bottom: 1px solid black;*/
    overflow: hidden;
  }
  .record_pop_content_self_content_table_tr_td{
    width: 20%;
    height: 3vh;
    /*background-color: #12d7f1;*/
    float: left;
    box-sizing: border-box;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
  .record_pop_content_self_content_table_tr_td:nth-child(5){
    border-right: none;
  }

  .record_pop_content_self_pagination{
    width: 55vw;
    height: 3vh;
    /*background-color: #bcbcbd;*/
  }
  .record_pop_content_self_pagination_content{
    width: 23vw;
    height: 3vh;
    /*background-color: #e4e4e8;*/
    position: relative;
    /*left: calc(50% - 11.5vw);*/
  }
  .element_pagination_content{
    /*background-color: #0ae80a;*/
  }


  .record_pop_others{
    width: 60vw;
    height: 66vh;
    /*background-color: #e0dede;*/
    position: relative;
    transform: translateY(1vh);
    transition: transform 1s ease;
  }
  .record_pop_others_a{
    width: 60vw;
    height: 5vh;
    background-color: #f3f0f0;
    color: #9c9a9a;
  }
  .record_pop_others_a>div{
    width: 20vw;
    height: 5vh;
    /*background-color: #2361cd;*/
    float: left;
    box-sizing: border-box;
    /*border-right: 1px black solid;*/
  }
  .record_pop_others_a>div:nth-child(3){
    box-sizing: border-box;
    padding-right: 2vw;
    text-align: right;
    line-height: 5vh;
    font-size: 0.7vw;
    text-decoration: underline;
  }
  .record_pop_others_a>div:nth-child(3)>span:hover{
    cursor: pointer;
    color: #0fabf3;
  }
  .record_pop_others_a>div:nth-child(3)>span:active{
    color: red;
  }
  .hidden {
    transform: translateY(-64vh);
  }





  .record_pop_others_content{
    width: 60vw;
    height: 61vh;
    background-color: white;
  }


  .record_pop_others_title{
    text-align: center;
    line-height: 5vh;
    font-weight: bolder;
    font-size: 1.5vw;
    color: #9da09d;
    /*font-weight: bolder;*/
  }
  .record_pop_others_content_table{
    width: 55vw;
    height: 57vh;
    /*background-color: #b3b1b1;*/
    position: relative;
    /*top: 2vh;*/
    left: calc(50% - 27.5vw);
  }
  .record_pop_others_content_table_title{
    width: 55vw;
    height: 3vh;
    /*background-color: #9a9999;*/
    color: #6c6b6b;
    border-bottom: 1px solid #868383;
    font-weight: bolder;
  }
  .record_pop_others_content_table_title>div{
    width: 20%;
    height: 100%;
    text-align: center;
    line-height: 3vh;
    float: left;
  }
  .record_pop_others_content_table_content{
    width: 55vw;
    height: 54vh;
    /*background-color: #9a9999;*/
    overflow: hidden;
  }
  .record_pop_others_content_table_content_tr{
    width: 55vw;
    height: 3vh;
    /*background-color: #9a9999;*/
    border-bottom: 1px solid #868383;
    color: #afb1af;
    font-size: 0.8vw;
  }
  .record_pop_others_content_table_content_tr>div{
    width: 20%;
    height: 100%;
    text-align: center;
    line-height: 3vh;
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #868383;
  }
  .record_pop_others_content_table_content_tr>div:nth-child(5){
    border-right:none;
  }


  .record_pop_others_content_pagination{
    width: 60vw;
    height: 4vh;
    /* background-color: #f35959; */
    position: relative;
    /*top: 2vh;*/
  }
  .record_pop_others_content_pagination_content{
    width: 23vw;
    height: 4vh;
    /* background-color: #efc0c0; */
    position: relative;
    left: 2vw;
  }

  .overall_grade{
    width: 10vw;
    height: 5vh;
    /* background-color: #0ae80a; */
    float: right;
    position: relative;
    top: -3vh;
    /* left: 50vw; */
    font-size: 0.6vw;
    text-align: center;
    line-height: 5vh; 
    text-decoration: underline;
    color: #6c6b6b;
  }
  .overall_grade span:hover{
    color: #0a72e8;
    cursor: pointer;
  }
  .overall_grade_page{
    width: 80vw;
    height: 90vh;
    background-color: white;
    /* float: left; */
    position: absolute;
    top: 6vh;
    left: -80vw;
    transform: translateX(0vh);
    transition: transform 1s ease;
  }
  .overall_grade_page_right {
    transform: translateX(80vw);
  }
  .overall_grade_page_left {
    transform: translateX(0vw);
  }
  .overall_grade_page_title{
    width: 80vw;
    height: 5vh;
    background-color: #f6f8f7;
    border-bottom: 1px solid rgb(142, 139, 139);
    font-weight: bolder;
    color: #000e05;
  }
  .overall_grade_page_title div{
    width: 33.2%;
    height: 100%;
    /* background-color: #717271; */
    /* border-left: 1px solid red; */
    float: left;
    
  }
  .overall_grade_page_title div:nth-child(2){
    text-align: center;
    line-height: 5vh;
  }
  .overall_grade_page_title div:nth-child(3){
    box-sizing: border-box;
    padding-right: 1vw;
    text-align: right;
    line-height: 5vh;
  }
  .overall_grade_page_title div:nth-child(3) i{
    font-weight: bolder;
    cursor: pointer;
  }
  .overall_grade_page_title div:nth-child(3) i:hover{
    color: #0a72e8;
    font-size: 1.2vw;
  }
  .overall_grade_page_title div:nth-child(3) i:active{
    color: #0ae87d;
    font-size: 1.2vw;
  }

  .overall_grade_page_content{
    width:80vw;
    height: 20vh;
    /* background-color: #0ae850; */
  }
  .overall_grade_page_content_function{
    width: 80vw;
    height: 15vh;
    /* background-color: #919194; */
    border-bottom: 1px dashed #f6f8f7;
  }
  .overall_grade_page_content_function_tip{
    width: 10vw;
    height: 15vh;
    background-color: #f6f8f7;
    text-align: center;
    line-height: 10vh;
    font-size: 1.5vw;
    font-weight: bolder;
    float: left;
    color: #405f84;
    /* border-bottom: 1px solid rgb(182, 177, 177); */
  }
  .overall_grade_page_content_function_content{
    width: 70vw;
    height: 15vh;
    background-color: #f6f8f7;
    float: left;
    box-sizing: border-box;
    padding: 0.5vw;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
    /* border: 1px solid rgb(138, 136, 136);  */
  }
  .overall_grade_page_content_function_content::-webkit-scrollbar{
    display: none;
  }
  .overall_grade_page_content_function_content_div{
    width: 6vw;
    height: 5vh;
    background-color: #de11ec;
    float: left;
    margin-right: 0.5vw;
    margin-bottom: 0.5vh;
    border-radius: 10px;
    overflow: hidden;
    color: rgb(11, 10, 10);
    box-sizing: border-box;
    font-weight: bolder;
  }
    .item-box {
      background-color: var(--bg-color);
      /* padding: 10px;
      margin: 5px; */
    }
  .overall_grade_page_content_function_content_div_text{
    width: 4vw;
    height: 5vh;
    /* background-color: #e712f6; */
    text-align: center;
    line-height: 5vh;
    float: left;
    font-size: 0.8vw;
    box-sizing: border-box;
  }
  .overall_grade_page_content_function_content_div_text:hover{
    color: rgb(12, 169, 237);
  }
  .overall_grade_page_content_function_content_div_button{
    width: 2vw;
    height: 5vh;
    /* background-color: #4bf612; */
    float: left;
    text-align: center;
    line-height: 5vh;
    font-weight: bolder;
    box-sizing: border-box;
  }
  .overall_grade_page_content_function_content_div_button:hover{
    color: #240ae8;
    cursor: pointer;
  }
  .overall_grade_page_content_function_content_lastdiv{
    background-color: #727574;
    font-size: 2vw;
    box-sizing: border-box;
    padding-right: 0.5vw;
    text-align: right;
    line-height: 5vh;
    color: white;
    box-sizing: border-box;
  }
  .overall_grade_page_content_function_content_lastdiv::after{
    content: " + ";
  }
  .overall_grade_page_content_function_content_lastdiv:hover{
    cursor: pointer;
    color: #0ae80a;
    border: 1px dashed rgb(46, 45, 45);
    background-color: #494b49;
  }
  .overall_grade_page_content_function_content_lastdiv:active{
    color: red;
  }

  .overall_grade_page_content_table{
    width: 80vw;
    height: 62vh;
    background-color: #f6f8f7;
    float: left;
    border-bottom: 1px dashed rgb(173, 170, 170);
  }
  
  .overall_grade_page_content_table_content{
    width: 78vw;
    height: 60vh;
    background-color: #f6f8f7;
    position: relative;
    top: 0.5vw;
    left: calc(50% - 39vw);
  }

  .overall_grade_page_content_table_content_title{
    width: 78vw;
    height: 4vh;
    font-size:0.5vw;
    /* background-color: #515353; */
    border-bottom: 1px solid rgb(133, 130, 130);
  }
  .overall_grade_page_content_table_content_title div{
    width: 12.25%;
    height: 4vh;
    /* background-color: #0ae80a; */
    float: left;
    text-align: center;
    line-height: 4vh;
    /* font-size: 0.3vw; */
    font-weight: bolder;
    color: #636463;
    overflow: hidden;
  }
  .overall_grade_page_content_table_content_title div:first-child{
    width: 5%;
   }
   .overall_grade_page_content_table_content_title div:nth-child(3){
    width: 9%;
  }
  .overall_grade_page_content_table_content_title div:nth-child(4){
    width: 15%;
  }
  
  .overall_grade_page_content_table_content_title div:nth-child(5){
    width: 15%;
  }
  .overall_grade_page_content_table_content_title div:nth-child(6){
    width: 15%;
  }
  .overall_grade_page_content_table_content_title div:nth-child(7){
    width: 15%;
  } 

  .overall_grade_page_content_table_content_title div:last-child{
    width: 13%;
  }
  .overall_grade_page_content_table_content_list{
    width: 78vw;
    height: 54vh;
    /* background-color: #515353; */
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .overall_grade_page_content_table_content_list::-webkit-scrollbar{
    display: none;
  }
  .overall_grade_page_content_table_content_list div{
    width: 78vw;
    height: 4vh;
    /* background-color: #39b9b9; */
    margin-bottom: 0.1vh;
    border-bottom: 1px solid rgb(133, 130, 130);
  }
  .overall_grade_page_content_table_content_list_tr div{
    width: 12.25%;
    height: 4vh;
    float: left;
    text-align: center;
    box-sizing: border-box;
    line-height: 4vh;
    border-right: 1px solid rgb(133, 130, 130);
    color: #6c6b6b;
    /* background-color: #0ae80a; */
  }
  .overall_grade_page_content_table_content_list_tr div:first-child{
    width: 5%;
  }

   .overall_grade_page_content_table_content_list_tr div:nth-child(3){
    width: 9%;
  }
  .overall_grade_page_content_table_content_list_tr div:nth-child(4){
    width: 15%;
  }
  
  .overall_grade_page_content_table_content_list_tr div:nth-child(5){
    width: 15%;
  }
  .overall_grade_page_content_table_content_list_tr div:nth-child(6){
    width: 15%;
  }
  .overall_grade_page_content_table_content_list_tr div:nth-child(7){
    width: 15%;
  } 


  .overall_grade_page_content_table_content_list_tr div:last-child{
    width: 13%;
    border-right: none;
  }



  .overall_grade_page_content_bottom{
    width: 80vw;
    height: 8vh;
    background-color: #f6f8f7;
    float: left;
  }
  .overall_grade_page_content_bottom_text{
    width: 78vw;
    height: 6vh;
    background-color: #f6f8f7;
    position: relative;
    top: 1vh;
    left: calc(50% - 39vw);
    font-size: 0.8vw;
    line-height: 6vh;
    box-sizing: border-box;
    padding-left: 1vw;
    color: #6c6b6b;
  }

  .overall_grade_page_add_tag{
    width: 40vw;
    height: 40vh;
    background-color: #d7dbdf;
    position: relative;
    top: -70vh;
    left: calc(50% - 20vw);
    border-radius: 10px;
    float: left;
  }
  .overall_grade_page_add_tag_title{
    width: 40vw;
    height: 5vh;
    /* background-color: #647678; */
    text-align: center;
    line-height: 5vh;
    font-size: 1vw;
    /* color: white; */
    font-weight: bolder;
    border-bottom: 1px solid rgb(148, 146, 146);
  }
  .overall_grade_page_add_tag_title div{
    width: 33.2%;
    height: 5vh;
    /* background-color: #0ae80a; */
    box-sizing: border-box;
    /* border-right: 1px solid black; */
    float: left;
  }
  .overall_grade_page_add_tag_title div:last-child{
    box-sizing: border-box;
    padding-right: 1vw;
    text-align: right;
  }
  .overall_grade_page_add_tag_title div:last-child i:hover{
     color: rgb(24, 242, 12); 
  }
  .overall_grade_page_add_tag_title div:last-child i:active{
     color: rgb(242, 12, 12); 
  }
  .overall_grade_page_add_tag_content{
    width: 40vw;
    height: 35vh;
    /* background-color: #647678; */
    box-sizing: border-box;
    padding: 0.5vw;
  
    overflow-y: scroll;   
    overflow-x: scroll;   
    scrollbar-width:none;  
    -ms-overflow-style: none;  
  }
  
  .overall_grade_page_add_tag_content::-webkit-scrollbar{
    display: none;
  }






  .overall_grade_page_add_tag_content_div{
    width: 5vw;
    height: 4vh;
    background-color: #bbc4c5;
    float: left;
    text-align: center;
    line-height: 4vh;
    border-radius: 10px;
    margin-right: 0.5vw;
    margin-bottom: 1vh;
    box-sizing: border-box;
    font-size: 0.6vw;
  }
  .overall_grade_page_add_tag_content_div:hover{
    border: 2px dashed greenyellow;
    cursor: pointer;
    color: #0a72e8;
    font-weight: bolder;
  }
  .overall_grade_page_add_tag_content_div:active{
    color: red;
  }


  .Footer{
    width: 100%;
    height: 15vh;
    /* background-color: red; */
    position: relative;
    top:79vh;
  }


</style>
